<template>
    <div>
      <!--<h1 :class="['title']">{{knowleContent.title}}</h1>
      <div>
        <span :class="['title_span']">作者:{{knowleContent.createBy}}</span>
        <span :class="['title_span']">创建时间:{{knowleContent.createTime}}</span>
        <span :class="['title_span']">分类:{{knowleContent.claificaName}}</span>
        <span :class="['title_span']">维护人:{{knowleContent.updateBy}}</span>
        <span :class="['title_span']">维护时间:{{knowleContent.updateTime}}</span>
      </div>
      <hr/>
      <div v-html="knowleContent.content"></div>-->

      <el-row :gutter="20">
        <el-col :span="6">
          <div>
            <el-card class="box-card card-body">
              <div slot="header" class="clearfix">
                <span>知识信息<!--:{{knowleContent.version}}--></span>
              </div>
              <div class="text">
                <p>添加人:{{knowleContent.createBy}}</p>
                <p>创建时间:{{knowleContent.createTime}}</p>
                <p>分类名称:{{knowleContent.claificaName}}</p>
                <p>维护人:{{knowleContent.updateBy}}</p>
                <p>更新时间:{{knowleContent.updateTime}}</p>
                <p>版本号:{{knowleContent.version}}</p>
                <!--<p>更新日志:</p>
                <p>{{knowleContent.updateRecords}}</p>-->
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="18">
          <div>
            <el-card class="card-body right-card">
              <h1 :class="['title']">{{knowleContent.title}}</h1>
              <div  class="ql-editor" v-html="knowleContent.contents"></div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
</template>

<script>
  import {getContent} from "@/api/knowledge/content";
    export default {
      name: "contents",
      data(){
        return {
          knowleContent:{}
        }
      },
      methods:{
        getKnowle(id){
          getContent(id).then(response=>{
            this.knowleContent=response.data;
          })
        }
      },
      created(){
        const id = this.$route.query.id;
        this.getKnowle(id);
      },
    }
</script>

<style scoped>
  .main_body{
    margin: 20px 10% 10px;
    border: 1px solid #a5a0a0;
    padding: 10px 20px;
    /*background-color: #e5c596;*/
    border-radius: 10px;
    box-shadow: 10px 10px 10px rgba(0,0,0,.5);
    /*考虑浏览器兼容性*/
    -moz-box-shadow: 10px 10px 10px rgba(0,0,0,.5);
    -webkit-box-shadow: 10px 10px 10px rgba(0,0,0,.5);
  }
  .title_span{
    margin-left: 150px;
  }
  .title{
    text-align:center;
  }
  .card-body{
    margin-top: 30px;
    margin-bottom: 5px;
  }
  .box-card{
    margin-left: 20px;
  }
  .right-card{
    margin-right: 20px;
  }
</style>
